<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center personalData_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub personalData_fd0_0'>
          <view class='flex flex-wrap align-center personalData_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  personalData_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='personalData_fd0_0_c1_c0'>我的资料</text>
          </view>
          <view class='flex flex-wrap align-center justify-end personalData_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout">
        <view class='flex flex-wrap align-center justify-between personalData_fd1_0'>
          <text class='personalData_fd1_0_c0'>头像</text>
          <view class='flex flex-wrap align-center'>
            <view class="upload position-relative">

              <image class=" personalData_fd1_0_c1_c0_image" mode="aspectFit"
                @tap="croppingUploadImage('avatar','avatar',dataInfo,dataInfo)"
                :src="dataInfo.avatar ? dataInfo.avatar : STATIC_URL+'3.png'"></image>
            </view>
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between personalData_fd1_0'>
          <text class='personalData_fd1_0_c0'>昵称</text>
          <view class='flex flex-wrap align-center'>
            <benben-input class='personalData_fd1_1_c1_c0' type="text" :placeholder="`请输入你的昵称`" confirm-type="done"
              :maxlength="8" placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx"
              v-model="dataInfo.nickname" />
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between personalData_fd1_0'
          @tap.stop="pickerDiy1704874099380=true">
          <text class='personalData_fd1_0_c0'>性别</text>
          <view class='flex flex-wrap align-center'>
            <benben-input class='personalData_fd1_1_c1_c0' type="text" :placeholder="`选择性别`" confirm-type="done"
              :maxlength="-1" :disabled='true' placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx"
              v-model="gender" />
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between personalData_fd1_0'
          @tap.stop="pickerDiy1704874166629=true">
          <text class='personalData_fd1_0_c0'>年龄</text>
          <view class='flex flex-wrap align-center'>
            <benben-input class='personalData_fd1_1_c1_c0' type="number" :placeholder="`填写年龄`" confirm-type="done"
              :maxlength="3" placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx"
              v-model="dataInfo.nianling" />
          </view>
        </view>
        <view class='flex flex-wrap align-center justify-between personalData_fd1_0'
          @tap.stop="pickerDiy1706106959067=true">
          <text class='personalData_fd1_0_c0'>地区</text>
          <view class='flex flex-wrap align-center flex-sub'>
            <view v-if="dataInfo.diqu" class="flex-sub personalData_fd1_1_c1_c0">
              {{dataInfo.shengfen}}{{dataInfo.chengshi}}{{dataInfo.diqu}}
            </view>
            <view v-else class="flex-sub text-999 text-lg personalData_fd1_1_c1_c0">选择地址
            </view>
            <!-- <benben-input class='flex-sub personalData_fd1_1_c1_c0' type="text" :placeholder="`选择地址`"
              confirm-type="done" :maxlength="-1" :disabled='true'
              placeholder-style="color:rgba(153, 153, 153, 1);font-size:32rpx" v-model="dataInfo.diqu" /> -->
          </view>
        </view>
        <!-- <view class='flex flex-direction flex-wrap align-start personalData_fd1_5'>
          <text class='personalData_fd1_0_c0'>业务范围</text>
          <view class='flex flex-wrap personalData_fd1_5_c1'>
            <textarea class='flex personalData_input_fd1_5_c1' :placeholder="'请填写您的业务范围'" :maxlength="240"
              placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="dataInfo.yewufanwei" />

          </view>
        </view> -->
      </view>

      <!---flex布局flex布局结束-->
      <!--选择地区开始 -->
      <benben-picker ref="benbenWritePickerCodepicker2" :visible.sync="pickerDiy1706106959067" mode='region'
        :mask-show='true' :city.sync="city" :area.sync="area" :province.sync="province"
        :provincename.sync="dataInfo.shengfen" :cityname.sync="dataInfo.chengshi" :areaname.sync="dataInfo.diqu"
        :picker-height='88' :hide-area='false'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between personalData_picker2_0'>
            <text class='personalData_picker2_0_c0' @tap="$refs.benbenWritePickerCodepicker2.cancel()">取消</text>
            <text>选择所在地区</text>
            <text class='personalData_picker2_0_c2' @tap="$refs.benbenWritePickerCodepicker2.pickerConfirm()">确认</text>
          </view>
        </template>
      </benben-picker>
      <!--选择地区结束 -->
      <!--选择性别开始 -->
      <benben-picker ref="benbenWritePickerCodepicker3" :visible.sync="pickerDiy1704874099380" :label.sync='gender'
        :value.sync='dataInfo.gender' :options='ganderType' mode='selector' :mask-show='true' :timeout='true'
        :picker-height='88' default-type='value' :default-props='{"label":"name","value":"value"}'>
        <template #picker-header>
          <view class='flex flex-wrap align-center justify-between personalData_picker3_0'>
            <text class='personalData_picker3_0_c0' @tap="$refs.benbenWritePickerCodepicker3.cancel()">取消</text>
            <text>选择性别</text>
            <text class='personalData_picker3_0_c2' @tap="$refs.benbenWritePickerCodepicker3.pickerConfirm()">确认</text>
          </view>
        </template>
      </benben-picker>
      <!--选择性别结束 -->
      <!---flex布局flex布局开始-->
      <view class="flex benben-flex-layout flex-wrap align-center personalData_flex_4">
        <button class='personalData_fd4_0' @tap.stop="editUserFunc" data-type="back" data-url="1">保存</button>
      </view>

      <!---flex布局flex布局结束-->


    </view>
  </view>
</template>
<script>
  import UploadImage from '@/common/utils/upload-image.js'
  import {
    validate
  } from '@/common/utils/validate.js'

  export default {
    components: {},


    data() {
      return {
        "pickerDiy1704874099380": false,
        "pickerDiy1706106959067": false,
        "fd1_5_c1": "",
        "ganderType": [{
          "name": "男",
          "value": "1",
          "image": ""
        }, {
          "name": "女",
          "value": "2",
          "image": ""
        }, {
          "name": "保密",
          "value": "3",
          "image": ""
        }],
        "gender_id": "",
        "gender": "",
        "dataInfo": {
          shengfen: '',
          chengshi: '',
          nianling: '',
          yewufanwei: '',
          "invite_code": "",
          "address": "",
          "address_code": "",
          "hobby": "",
          "tags": "",
          "id": "",
          "userlevel_id": "",
          "mobile": "",
          "real_name": "",
          "avatar": "",
          "account": "",
          "email": "",
          "birthday": "",
          "gender": "",
          "create_time": "",
          "user_money": "",
          "freeze_money": "",
          "total_consumption_money": "",
          "score": "",
          "_mobile": "",
          "coupon": "",
          "collection_count": "",
          "browse_count": "",
          "total_money": "",
          "certified": "",
          "nickname": "",
          "is_pay_password": "",
          "follow_count": "",
          "is_close": "",
          "exp": "",
          "area_code": "",
          "jianjie": "",
          "level_name": "",
          "next_need_exp": "",
          "support_num": "",
          "follow_num": "",
          "fans_num": "",
          "user_label": [],
          "is_school": ""
        },
        "data": {
          "userinfo": {
            "id": "",
            "avatar": "",
            "real_name": "",
            "nickname": "",
            "email": "",
            "gender": "",
            "mobile": "",
            "birthday": "",
            "client_id": "",
            "phone": ""
          }
        },
        city: '',
        area: '',
        province: ''
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {
      this.getDaraFunc()
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {

    },
    onHide() {

    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      //裁剪图片上传
      croppingUploadImage(id, path, obj, obj1, fnName = false) {
        let self = this
        uni.showModal({
          title: '相机相册信息授权提示',
          content: '为了实现扫一扫、设置头像、设置个人主页背景、发送带图或视频的音乐动态和私信功能，需要访问您的拍摄照片和录制权限，您如果拒绝开，将无法使用上述功能',
          success(res1) {
            if (res1.confirm) {
              if (!obj) obj = this
              if (!obj1) obj1 = this
              let itemList = obj1[path] ? ['修改头像', '拍照', '从手机相册选择'] : ['拍照', '从手机相册选择']

              function imageCroppingCuccess() {
                uni.$once('image-cropping-success', (file) => {
                  if (!file) return
                  new UploadImage([file], {
                    complete: (res) => {
                      if (id) self.$set(obj, id, res[0].id)
                      if (path) self.$set(obj1, path, res[0].path)
                      if (fnName) self[fnName]()
                    },
                  })
                })
              }
              uni.showActionSheet({
                itemList: itemList,
                success: function(res) {
                  if (res.tapIndex == 0 && obj1[path]) {
                    uni.navigateTo({
                      url: '/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&&myImgUrl=' +
                        obj1[path],
                      animationDuration: 0,
                    })
                    imageCroppingCuccess()
                  }
                  if ((res.tapIndex == 1 && obj1[path]) || (res.tapIndex == 0 && !obj1[path])) {
                    uni.chooseImage({
                      count: 1,
                      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                      sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
                      success: (res) => {
                        // 跳转到图片裁切页面
                        uni.navigateTo({
                          url: `/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&fileType=${res.tempFiles[0].type}&myImgUrl=${res.tempFilePaths[0]}`,
                          animationDuration: 0,
                        })
                        imageCroppingCuccess()
                      },
                    })
                  }
                  if ((res.tapIndex == 2 && obj1[path]) || (res.tapIndex == 1 && !obj1[path])) {
                    uni.chooseImage({
                      count: 1,
                      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                      sourceType: ['album'], // 可以指定来源是相册还是相机，默认二者都有
                      success: (res) => {
                        // 跳转到图片裁切页面
                        uni.navigateTo({
                          url: `/pages/benben-built-in/image-cropping/image-cropping?rectHeight=200&rectWidth=200&fileType=${res.tempFiles[0].type}&myImgUrl=${res.tempFilePaths[0]}`,
                          animationDuration: 0,
                        })
                        imageCroppingCuccess()
                      },
                    })
                  }
                },
                fail: function(res) {
                  console.log(res.errMsg)
                },
              })
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        })

        return;

      },
      //获取会员信息
      async getDaraFunc() {
        //请求方法
        //数据验证

        let datadataInfo = await this.$api.get(global.apiUrls.post5c78c4772da97, {

        });

        if (datadataInfo.data.code != 1) {
          this.$message.info(datadataInfo.data.msg);
          return
        }
        let infodataInfo = datadataInfo.data;
        this.dataInfo = infodataInfo.data

        if (this.dataInfo.gender == '1') {
          this.gender = '男';
        } else if (this.dataInfo.gender == '2') {
          this.gender = '女';
        } else {
          this.gender = '保密';
        }
      },
      async editUserFunc() {
        console.log('province', this.province)
        if (this.isCheck === true) {
          return
        } else {
          // this.name.name = this.dataInfo.nickname;
          this.isCheck = true;
          //请求方法
          //数据验证
          let cityinfos = ''
          // if (this.dataInfo.city_info.length) {
          //   cityinfos = this.dataInfo.city_info.join(',')
          // }
          let datadataMessage = await this.$api.post(global.apiUrls.post5cb54af125f1c, {
            avatar: this.dataInfo.avatar,
            nickname: this.dataInfo.nickname,
            gender: this.dataInfo.gender,
            birthday: this.dataInfo.birthday,
            diqu: this.dataInfo.diqu,
            shengfen: this.dataInfo.shengfen,
            chengshi: this.dataInfo.chengshi,
            nianling: this.dataInfo.nianling,
            yewufanwei: this.dataInfo.yewufanwei
          });

          if (datadataMessage.data.code != 1) {
            this.$message.info(datadataMessage.data.msg);
            return
          }
          let infodataMessage = datadataMessage.data;
          this.dataMessage = infodataMessage.data
          this.$message.info('保存成功');
          setTimeout(() => {
            this.$urouter.navigateBack(1);
          }, 800)
        }
      },
    }
  };
</script>
<style lang="scss" scoped>
  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: rgba(255, 255, 255, 1);
    background-size: 100% auto;
  }

  .personalData_flex_0 {
    background: #fff;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .personalData_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .personalData_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .personalData_fd0_0_c0 {
    width: 120rpx;
  }

  .personalData_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .personalData_input_fd1_5_c1 {
    width: 100%;
    height: 200rpx;
    font-size: 32rpx;
    font-weight: 400;
    color: #333;
    white-space: pre-wrap;
  }

  .personalData_fd1_5_c1 {
    background: rgba(248, 248, 250, 1);
    width: 678rpx;
    border-radius: 16rpx;
    padding: 24rpx 24rpx 0rpx 24rpx;
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .personalData_fd1_5 {
    margin: 0rpx 0rpx 0rpx 32rpx;
    padding: 32rpx 32rpx 32rpx 0rpx;
  }

  .personalData_fd1_1_c1_c0 {
    text-align: right;
    color: rgba(51, 51, 51, 1);
    font-size: 32rpx;
  }

  .personalData_fd1_0_c1_c0_image {
    width: 88rpx;
    height: 88rpx;
    border-radius: 100rpx;
  }

  .personalData_fd1_0_c0 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 400;
    line-height: 32rpx;
  }

  .personalData_fd1_0 {
    border-bottom: 1px solid #eee;
    margin: 0rpx 0rpx 0rpx 32rpx;
    padding: 32rpx 32rpx 32rpx 0rpx;
  }

  .personalData_picker2_0_c2 {
    color: rgba(37, 104, 174, 1);
  }

  .personalData_picker2_0_c0 {
    color: rgba(191, 191, 191, 1);
  }

  .personalData_picker2_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  .personalData_picker3_0_c2 {
    color: rgba(37, 104, 174, 1);
  }

  .personalData_picker3_0_c0 {
    color: rgba(153, 153, 153, 1);
  }

  .personalData_picker3_0 {
    border-bottom: 1px solid #eee;
    background: #fff;
    padding: 0rpx 32rpx 0rpx 32rpx;
    line-height: 88rpx;
    border-radius: 25rpx 25rpx 0rpx 0rpx;
    background-size: 100% auto !important;
  }

  .personalData_flex_4 {
    position: fixed;
    left: 32rpx;
    bottom: calc(40rpx + var(--window-bottom));
  }

  .personalData_fd4_0 {
    background: rgba(37, 104, 174, 1);
    border-radius: 50rpx;
    width: 686rpx;
    line-height: 88rpx;
    font-size: 32rpx;
    color: #fff;
  }
</style>
